<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box {
            position: fixed;
            right: 20px;
            bottom: 20px;
        }

    </style>
</head>
<body style="height: 2000px">
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<span id="box"><img style="width: 50px;height: 50px" src="基础练习/img/1.jpg"></span>
<script>
    var box = document.getElementById('box');
    box.style.display = "none";

    window.onscroll = function () {
        var docScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        box.onclick = function () {
            sctop();
        }
        var wtop = window.innerHeight;
        if (wtop <= docScrollTop) {
            box.style.display = "block";
        }else {
            box.style.display = "none";

        }

        function sctop() {
            if (docScrollTop) {
                document.documentElement.scrollTop = 0;
                document.body.scrollTop = 0;
            }
        }
    }

</script>

<script>
    /*offset demension 偏移量
1.定位父级元素  offsetparent
2.offsetwidth   width+border+padding
3.offsetTop     当前元素的边框上到offsetparent的上边框的距离距离
总结：相对于父元素（看父元素是否有定位，如果有定位，以父元素为基准，的top值，如果没有定位的话就是，相对于body的top值）

1.clientWidth 元素的宽  clientHeight元素的高
2.clientTop    border的宽    内容到边距的大小
    console.time('time')
    var box=document.getElementById('box');
    var hade=document.getElementById('b');
    //获取页面大小。属性只读
    //设置display:none;客户端client属性为0;
    console.log(document.documentElement.clientWidth);
    console.log(document.documentElement.clientHeight);

    //
    console.log(document.documentElement.offsetWidth);
    console.log(document.documentElement.offsetHeight);

    console.timeEnd('time')
     var box=document.getElementById('box');
    var btn1=document.getElementById('btn1');

    console.log(box.scrollHeight);//内容高度****clienheight+scrolltop
    box.onscroll=function () {
        console.log(box.clientHeight);
        console.log(box.scrollTop);//滚动条高度

    }
    btn1.onclick=function () {
            box.scrollTop+=10;
    }
    */

</script>
</body>
</html>